<style lang="scss" scoped>
    .userinfo{
        border-right:1px solid #E3E3E5;
        padding: 40px 0;
        text-align: center;
        h6{
            margin:0;
            line-height: 40px;
            font-size: 18px;
            color: var(--zi-color);
        }
        .avatar{
            width: 100px;
            height: 100px;
            border:1px solid var(--zi-color);
            margin:auto;
            border-radius: 50%;
        }
    }
    .header{
        border-bottom: 1px solid #E3E3E5;
        padding:0 20px;
        .img{
            margin-top: 17px;
            img{
                cursor: pointer;
                display: block;
                width: 28px;
                height: 28px;
            }
        }
    }
</style>

<template>
    <div class="index">
        <Layout>
            <Sider class="bg-fff" style="height:100vh" width="220">
                <div class="userinfo">
                    <div class="avatar"></div>
                    <h6>嘎嘎嘎</h6>
                    <p>管理员</p>
                </div>
                <Menu width="220" :active-name="1">
                    <MenuItem :name="index" v-for="(val,index) in menuName" :key="index" to="index2">
                        <img :src="icons[index]" alt="">
                        <span>{{val}}</span>
                    </MenuItem>
                </Menu>
            </Sider>
            <Layout>
                <Header class="header bg-fff">
                     <Row type="flex" justify="space-between" >
                        <Col class="d-flex">
                            <div class="img">
                                <img src="@/assets/date.png"  >
                            </div>
                            <span class="zi-color px-1">星期一/2020-12-12</span>
                            <span class="color-999">查看更多日期</span>
                        </Col>
                        <Col class="d-flex">
                            <div class="img mr-1">
                                <img src="@/assets/search.png" >
                            </div>
                            <span class="mr-3">搜索项目</span>
                            <Badge :count="1" class="img mr-3">
                                <img src="@/assets/msg1.png" >
                            </Badge>
                            <Badge :count="3" class="img mr-3">
                                <img src="@/assets/msg2.png" >
                            </Badge>
                            <div class="img">
                                <img src="@/assets/config.png" >
                            </div>
                        </Col>
                    </Row>
                </Header>
                <Content class="p-2">
                    <router-view/>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>

<script>
export default {
    data(){
        return {
            icons:[],
            menuName:[
                '首页','实时监控','数据分析',
                '异常监控','项目管理','综合服务',
                '财务管理','资质认证'
            ]
        }
    },
    created(){
        const context = require.context('@/assets/sider_icon', false)
        context.keys().forEach(k => {
            this.icons.push(context(k))
        })
    }
}
</script>
